<template>
	<view class="index">
		<view class="backgroud">
			<view class="header">
				<view class="left">
					<view class="head" @click="personal">
						<image v-if="userInfo.avatar" :src="userInfo.avatar" />
						<image v-else src="@/static/image/defaultAvatar.png" />
					</view>
					<view class="name">
						<text class="user">{{ userInfo.name }}</text>
						<text class="inout">，欢迎进入!</text>
					</view>
				</view>
				<view class="right" @click="message">
					<view class="info">
						<image src="/static/image/index/info.svg" />
						<view v-if="isRead" class="rio"></view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="bro">
					<!-- 精准防控 -->
					<view class="image1" @click="prevention"></view>
					<!-- 精准宣教 -->
					<view class="image2" @click="mission"></view>
					<!-- 精准监督 -->
					<view class="image3" @click="supervision"></view>
					<!-- 精准识别 -->
					<view class="image4" @click="identify"></view>
					<view class="phone">
						<image src="/static/image/index/system.png" />
						<text>廉洁风险管理体系</text>
					</view>
				</view>
			</view>
			<view class="focus">
				<title :txt="'廉政焦点'"></title>

				<view v-if="swiperImage.length!==0" class="swiper_area">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" @change="changeIndex">
						<swiper-item v-for="(item, index) in swiperImage" :key="index">
							<view class="swiper-item" @click='news(item._id)'>
								<image :src="item.img" />
							</view>
						</swiper-item>
						
					</swiper>
					<view class="numb">
					 <text style="font-size: 32rpx;margin-right: 6rpx;">{{swiperIdx+1}}</text>/{{swiperImage.length}}
					</view>
					<view class="title">
						<view @click='news(swiperImage[swiperIdx]._id)' class="title_text">{{ swiperImage[swiperIdx].title }}</view>
					</view>
				</view>
				<view v-else>
					<xbd-zwnz marginTop='100'></xbd-zwnz>
				</view>
			</view>
			<view class="news">
				<headerNav :navData="focusData" @click="tab1" />

				<view class="news-item" @click="news(item._id)" v-for="(item,index) in newsLists" :key="index">
					<view class="image">
						<image :src="item.img" />
					</view>
					<view class="right">
						<text>{{item.title}}</text>
						<text>{{item.created_at | timeFormat('YYYY-MM-DD HH:mm')}}</text>
					</view>
				</view>
				<!-- 暂无数据 -->
				<xbd-zwnz v-if="newsLists.length ===0"></xbd-zwnz>
				<xbd-see-more v-if="newsLists.length !==0" :msgInfo="'pages/index/news/news_list?type=1&msg='+tab1val"></xbd-see-more>
			</view>
			<view class="culture">
				<title txt="廉政文化"></title>
				<headerNav :navData="navData" @click="tab2" />
				<view class="culture-list">
					<view class="culture-list-content" @click="news(item._id)" v-for="(item, index) in cultureData"
						:key="index">
						<view class="culture-list-image">
							<image :src="item.img" />
						</view>
						<view class="culture-list-text">
							{{ item.title }}
						</view>
					</view>

				</view>
				<!-- 暂无数据 -->
				<xbd-zwnz v-if=" cultureData.length ===0"></xbd-zwnz>
				<!-- 查看更多 -->
				<xbd-see-more v-if=" cultureData.length !==0" :msgInfo="'pages/index/news/news_list?type=2&msg='+tab2val"></xbd-see-more>
			</view>
		</view>
	</view>
</template>

<script>
	// import { PasswordFreeLogin } from "@/utils/DDlogin";
	import title from "@/components/title/title.vue";
	import headerNav from "@/components/nav/nav.vue";
	import {
		indexData
	} from "@/mock/data.js";
	import {
		PasswordFreeLogin
	} from '@/utils/DDlogin.js';
	import Index from '@/api/item/index.js';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				isRead:false,
				userName: "周小小",
				swiperIdx: 0,
				swiperImage: [],
				newsLists: [],
				navData: [{
					title: "廉政风采",
					id: '1'
				}, {
					title: "廉政展厅",
					id: '2'
				}, {
					title: "廉政文苑",
					id: '3'
				}],
				focusData: [{
						title: "廉政要闻",
						id: '1'
					},
					{
						title: "工作动态",
						id: '2'
					},
					{
						title: "通知公告",
						id: '3'
					},
					{
						title: "政策法规",
						id: '4'
					},
				],
				cultureData: [],
				// 传入却换列表
				tab1val: '廉政要闻',
				tab2val: '廉政风采'
			};
		},
		components: {
			title,
			headerNav,
		},
		async onLoad() {
		// 	// 免密登录
			await this.PasswordFreeLogin();
			await this.focus()
			await this.impNews()
			await this.culture()
			await this.mess()
			uni.$on('msgUpdata',this.mess)
		},
		mounted() {},
		onShow() {
		},
		watch: {
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			PasswordFreeLogin,
			...mapMutations(['changeUserInfo']),
			// pages/personalcenter/message
			// 首页我的消息模块
			message() {
				// this.$showLoading('加载中');
				uni.navigateTo({
					url: "/pages/personalcenter/message",
				});
			},
			//个人中心入口
			personal() {
				uni.navigateTo({
					url: "/pages/personalcenter/personalcenter",
				});
			},
			// news入口
			news(id) {
				uni.navigateTo({
					url: `/pages/index/news/news?id=${id}`,
				});
			},
			mission() {
				uni.navigateTo({
					url: "/pages/mission/mission",
				});
			},
			identify() {
				uni.navigateTo({
					url: "/pages/identify/identify",
				});
			},
			supervision() {
				uni.navigateTo({
					url: "/pages/supervision/supervision",
				});
			},
			prevention() {
				uni.navigateTo({
					url: "/pages/prevent/prevention",
				});
			},
			successVal() {
				uni.navigateTo({
					url: "/pages/success/success",
				});
			},
			change() {
				dd.chooseImage({
					count: 2,
					success: (res) => {
						console.log(res);
						// dd.alert({
						//   title: "选中的图片",
						//   content: JSON.stringify(res.filePaths),
						// });
					},
				});
			},
			changeIndex(e) {
				this.swiperIdx = e.detail.current;
			},
			tab1(i, id, val) {
				this.tab1val = val
				this.impNews()
				// console.log('tab', i,id, val)
			},
			tab2(i, id, val) {
				this.tab2val = val
				this.culture()
				console.log('tab', i, id, val)
			},
			question() {
				uni.navigateTo({
					url: "/pages/exam/confirmInfo/confirmInfo",
				});
			},
			
			async mess() {
				
				const res = await Index.getMessageEx()
				this.isRead = res.data.exist
				console.log(res, 'res')
			},
			async focus() {
				const info = {
					focus: '1'
				}
				const res = await Index.getHome(info)
				this.swiperImage = res.data.list
				console.log(res, 'res')
			},
			async impNews() {
				const info = {
					page: 1,
					perpage: 5,
					module: this.tab1val
				}
				const res = await Index.getHome(info)
				this.newsLists = res.data.list

			},
			async culture() {
				const info = {
					page: 1,
					perpage: 6,
					module: '廉政文化',
					culture: this.tab2val
				}
				const res = await Index.getHome(info)

				if (!res.success) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					})
				}
				this.cultureData = res.data.list
			}
		},
	};
</script>

<style lang="scss" scpred>
	.index {
		position: relative;

		.backgroud {
			width: 750rpx;
			box-sizing: border-box;
			background: url("/static/image/index/indexBac.jpg") no-repeat;
			background-size: 100% 1008rpx;
			position: absolute;
			top: 0;
		}

		.header {
			padding: 34rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 36rpx;
				display: flex;
				align-items: center;

				.head {
					width: 80rpx;
					height: 80rpx;
					margin-right: 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.name {
					color: #fff;

					.user {
						font-size: 52rpx;
					}

					.inout {
						font-size: 30rpx;
					}
				}
			}

			.right {
				//   width: 300rpx;
				display: flex;
				align-items: center;

				.info {
					width: 50rpx;
					height: 50rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.rio {
						background-color: red;
						position: absolute;
						right: -6rpx;
						top: -4rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 10rpx;
					}
				}
			}
		}

		.content {
			position: relative;

			.bro {
				width: 750rpx;
				height: 800rpx;
				// background: red;
				position: relative;
				margin-bottom: 120rpx;

				.image1 {
					width: 242rpx;
					height: 258rpx;
					background: url("/static/image/index/accurate-control.png") no-repeat;
					background-size: 242rpx 258rpx;
					background-position: center;
					position: absolute;
					top: 100rpx;
					left: 238rpx;
				}

				.image2 {
					width: 202rpx;
					height: 210rpx;
					background: url("/static/image/index/accurate-education.png") no-repeat;
					background-size: 202rpx 210rpx;
					position: absolute;
					left: 85rpx;
					top: 290rpx;
				}

				.image3 {
					width: 202rpx;
					height: 210rpx;
					background: url("/static/image/index/accurate-supervise.png") no-repeat;
					background-size: 202rpx 210rpx;
					position: absolute;
					right: 126rpx;
					top: 290rpx;
				}

				.image4 {
					width: 200rpx;
					height: 202rpx;
					background: url("/static/image/index/accurate-distinguish.png") no-repeat;
					background-size: 200rpx 202rpx;
					position: absolute;
					bottom: 180rpx;
					left: 256rpx;
				}

				.phone {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: absolute;
					left: 266rpx;
					bottom: -60rpx;

					image {
						width: 154rpx;
						height: 200rpx;
					}

					text {
						color: #8592b4;
						font-size: 28rpx;
					}
				}
			}
		}

		.focus {
			padding: 0 34rpx;
			box-sizing: border-box;
			border-bottom: 20rpx solid #f8f8f8;

			.swiper_area {
				width: 686rpx;
				position: relative;
				.numb{
					position: absolute;
					width: 100rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					right: 32rpx;
					top: 320rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					background: rgba(0,0,0,0.40);
					border-radius: 25rpx;
					font-size: 24rpx;
					color: #fff;
				}
				.swiper {
					width: 686rpx;
					height: 386rpx;
					border-radius: 12rpx;
					
					
					.swiper-item {
						height: 386rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.title {
					box-sizing: border-box;
					padding: 30rpx 0 40rpx 0;
					font-size: 30rpx;
					.title_text{
						width: 680rpx;
						overflow: hidden; 
						white-space: nowrap; 
						text-overflow: ellipsis;
					}
				}
			}
		}

		.news {
			padding: 20rpx 34rpx 34rpx 34rpx;
			box-sizing: border-box;
			border-bottom: 20rpx solid #f8f8f8;

			&-item {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;

				.image {
					width: 198rpx;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					display: flex;
					height: 444rpx;
					height: 100rpx;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;

					& text:first-child {
						width: 444rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					& text:last-child {
						color: #a0a7b8;
						font-size: 24rpx;
					}
				}
			}
		}

		.culture {
			padding: 20rpx 34rpx 30rpx 34rpx;
			box-sizing: border-box;

			.culture-list {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.culture-list-content {
					display: flex;
					width: 328rpx;
					flex-direction: column;
					justify-content: space-evenly;

					.culture-list-image {
						image {
							width: 328rpx;
							height: 184rpx;
						}
					}

					.culture-list-text {
						margin: 20rpx 0 40rpx 0;
						font-size: 30rpx;
						width: 328rpx;
						overflow: hidden; 
						white-space: nowrap; 
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>
